<template>
  <div class="x-split-container" :style="gridStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(
  defineProps<{
    type?: string
  }>(),
  {
    type: 'left'
  }
)
let gridStyle = computed(() => {
  switch (props.type) {
    case 'top':
      return {
        gridTemplateRows: 'auto 1fr'
      }
      break
    case 'bottom':
      return {
        gridTemplateRows: '1fr auto'
      }
      break
    case 'left':
      return {
        gridTemplateColumns: 'auto 1fr'
      }
      break
    case 'right':
      return {
        gridTemplateColumns: '1fr auto'
      }
      break
  }
})
</script>

<style lang="scss">
.x-split-container {
  display: grid;
}
</style>
